<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cyh5</title>
    <script src="font/iconfont.js"></script>
    <style>
         body,h2,ul,p{
            margin: 0;
            padding: 0;
        }
        .title{
            position: fixed;
            width: 100%;
            height: 150px;
            display: flex;
            z-index: 4;
            border-bottom: 3px solid rgb(244,244,244);
            margin-top: -250px;
            background-color: #fff;
        }
        .title h2{
            margin-left: 440px;
            margin-top: 40px;
            font-size: 50px;
        }
        .title_jt{
            width: 60px;
            height: 140px;
        }
        .invent{
            margin-left: 250px;
            width: 100px;
            height: 150px;
        }
        .title_sm{
            position: relative;
            bottom: 15px;
            left: 8px;
            width: 70px;
        }
        .invent p{
            position: relative;
            bottom: 50px;
            left: 5px;
            font-size: 23px;
        }

       .second{
            position: relative;
            top: -46px;
            left: 40px;
            background-color: rgb(245,246,248);
            width: 900px;
            height: 100px;
            border-radius: 50px;
            margin-top: 250px;
       }
       .title_ss{
            position: relative;
            left: 330px;
            bottom: 25px;
            width: 60px;
       }
       .second p{
            position: absolute;
            bottom: 25px;
            left: 420px;
            font-size: 42px;
            color: rgb(153, 153, 153);
            opacity: .6;
       }
       .third{
           margin-top: 5px;
           height: 80px;
           display: flex;
       }
       .third p{
          font-size: 42px;
          margin-left: 80px;
          color: rgb(180, 180, 180);
       } 
       a{
           text-decoration: none;
       }

       .jlist{
            list-style: none;
            height: 1700px;
            background-color: #fff;
            background-color: rgb(245,246,248);
            
        }
        .jlist div{
            position: relative;
            top: 30px;
            left: 2%;
            width: 96%;
            height: 270px;
            margin-bottom: 30px;
            background-color: #fff;
            border-radius: 20px;
        }
        .jlist img{
            margin-top: 40px;
            margin-left: 50px;
            width: 30%;
            border-radius: 10px;
        }
        .type{
            position: relative;
            bottom: 168px;
            right: 287px;
            color: #fff;
            background-color: rgb(247, 83, 19);
            padding: 4px  10px 5px;
            letter-spacing: 2px;
            font-size: 20px;
    
    }
        .info{
            color: #fff;
            font-weight: bold;
            letter-spacing: 2px;
            position: absolute;
            right: 5px;
            bottom: 6px;
            font-size: 12px;
        }
        .jlist h3{
            margin-top: -170px;
            font-size: 35px;
            line-height: 22px;
            margin-left: 400px;
        }
        .jlist p{
            font-size: 30px;
            line-height: 18px;
            margin-left: 400px;
            margin-bottom: 15px;
            color: rgb(190, 190, 190);
        }




       .navi{
           height: 150px;
            list-style: none;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: #fff;
            z-index: 9;
            display: flex;
            background-color: rgb(247, 247, 247);
       }
       .navi>li{
           width: 25%;
           text-align: center;
           margin-bottom: 200px;
       }
       .icon2{
            width: 80px;
            height: 100px;
            vertical-align: 20px;
            fill:currentColor;
            overflow: hidden;
            margin-bottom: 15px;
            margin-right: 20px;
            
       }
       .navi a{
           text-decoration: none;
       }
       .navi p{
           font-size: 40px;
           margin-right: 18px;
           margin-top: -50px;
           color: rgb(102,102,102);
       } 
    </style>
</head>
<body>
    <div class="title">
        <h2>首页</h2>
        <svg class="title_jt" aria-hidden="true">
            <use xlink:href="#icon-xiajiantou"></use>
        </svg>
        <div class="invent">
            <svg class="title_sm" aria-hidden="true">
                <use xlink:href="#icon-saoma"></use>
            </svg>
            <p>邀请码</p>
        </div>
    </div>

        <a href="#">
            <div class="second">
                <svg class="title_ss" aria-hidden="true">
            <use xlink:href="#icon-sousuo"></use>
            </svg>
                <p>找资料</p>
            </div>
        </a>
    <div class="third">
        <a href="project1-index.html"><p>常用</p></a>
        <a href="#"><p>关注</p></a>
        <a href="project6.html"><p>活动</p></a>
        <a href="project4.html"><p>微读书</p></a>
        <a href="#"><p>知视频</p></a>
    </div> 


    <ul class="jlist"></ul>


 

    <ul class="navi">
        <li>
            <a href="project1-index.html">
                <svg class="icon2" aria-hidden="true">
                    <use xlink:href="#icon-home"></use>
                </svg>
                <p>首页</p>
            </a>
        </li>
    
        <li>
            <a href="./project2.html">
                <svg class="icon2" aria-hidden="true">
                    <use xlink:href="#icon-xiaoxi0"></use>
                </svg>
                <p>消息</p>
            </a>
        </li>
    
        <li>
            <a href="#">
                <svg class="icon2" aria-hidden="true">
                    <use xlink:href="#icon-biji"></use>
                </svg>
                <p>笔记</p>
            </a>
        </li>
    
        <li>
            <a href="project5.html">
                <svg class="icon2" aria-hidden="true">
                    <use xlink:href="#icon-wo1"></use>
                </svg>
                <p>我</p>
            </a>
        </li>
</ul> 


<!-- json2 -->
<script>
    var json=[{
            img:"./img/1.jpg",
            type:"小组",
            tital:"常月华",
            content:"19001011027",
            p:"计算机19010"

        },
        {
            img:"./img/1.jpg",
            type:"小组",
            tital:"json里的标题",
            content:"json里的内容，可能较多文字",
            p:"话题:137个"

        },
        {
            img:"./img/3.jpg",
            type:"小组",
            tital:"json里的标题",
            content:"json里的内容，可能较多文字",
            p:"话题:56个"

        },
        {
            img:"./img/4.jpg",
            type:"小组",
            tital:"json里的标题",
            content:"json里的内容，可能较多文字",
            p:"话题:89个"

        },
        {
            img:"./img/1.jpg",
            type:"小组",
            tital:"json里的标题",
            content:"json里的内容，可能较多文字",
            p:"话题:100个"

        },
        ]
        var jlist=document.querySelector(".jlist");

json.forEach(function(v,i){
    var nli=document.createElement("li");/* 创建li元素 */
    nli.innerHTML=`<div>
       
        <a href="#"><img src="${v.img}"></a>
        <span class="type">${v.type}</span>
        
    <h3>${v.tital}</h3>
        <p>${v.content}</p>
        <p>${v.p}</p>
    </div>
        
    `;
    //es6新的字符串语法，内部可包括引号，包括变量${}
    jlist.appendChild(nli);
    //在jlist的内部的最后添加nli。
});
</script>

</body>
</html>